<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <button id="btn">添加一条访客信息</button>
        <button id="btn2">删除选中</button>
        <button id="btn3">年龄从小到大</button>
    </div>
    <div>
        <table border="1">
            <tr>
                <th>序列号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
                <th>选择</th>
            </tr>
        </table>
    </div>
    <script>
        var info = [{
            name: "胡杭",
            age: 16
        }, {
            name: "胜明",
            age: 22
        }, {
            name: "军毅",
            age: 21
        }, {
            name: "晓华",
            age: 13
        }, {
            name: "盛聪",
            age: 23
        }, {
            name: "侦剑",
            age: 32
        }, {
            name: "红翔",
            age: 25
        }, {
            name: "超维",
            age: 18
        }, {
            name: "士琪",
            age: 22
        }, {
            name: "艳华",
            age: 20
        }];
        let btn = document.querySelector('#btn');
        let btn1;
        let table = document.querySelector('table');
        let btn2 = document.querySelector('#btn2');
        let btn3 = document.querySelector('#btn3');
        let n = 0;
        let checkInput;
        let hasCheck;
        btn.onclick = function(){
            let tr = document.createElement('tr');
            tr.innerHTML = "<td>"+(n+1)+"</td>"+"<td>"+info[n].name+"</td>"+"<td class='sortTd'>"+info[n].age+"</td>"+"<td>"+"<button class='btn1'>删除</button>"+"</td>"+"<td>"+"<input type='checkbox' class='checkInput'>"+"</td>";
            n++;
            table.appendChild(tr);
            btn1 = document.getElementsByClassName('btn1');
            console.log(btn1);
            for(let i=0;i<btn1.length;i++){
                btn1[i].onclick=function(){
                    this.parentElement.parentElement.remove();
                }
            }
            checkInput = document.getElementsByClassName('checkInput');
            console.log(checkInput);
            for(let i=0;i<checkInput.length;i++){
                checkInput[i].onchange=function(){
                    this.name='checked';
                    console.log(this);
                }
            }
        }
        btn2.onclick=function(){
            hasCheck = document.querySelectorAll('[name=checked]');
            console.log(hasCheck);
            for(let i = 0;i<hasCheck.length+1;i++){
                hasCheck[i].parentElement.parentElement.remove();
            }
        }
        btn3.onclick = function(){
            let arr = [];
            let b = [];
            let sortTd = document.getElementsByClassName('sortTd');
            let tr = document.getElementsByTagName('tr');
            // console.log(tr)
            for(let i = 0;i<sortTd.length;i++){
               arr.push(sortTd[i].innerHTML);// [16,20,17]
               arr.sort();               // [16,17,20]
               
            }
            console.log(arr);
        }
        
        
    </script>
</body>
</html>